import * as YvanUI from 'yvan-ui-wotu'
import {AppTab} from 'yvan-ui-wotu'

const {lodash: _, Antd, React} = YvanUI
const {Layout, Menu, Dropdown, Input, Skeleton} = Antd
const {Header, Content, Footer, Sider} = Layout;
const {SubMenu} = Menu;
const {Search} = Input;

interface AdminProps {

}

interface AdminState {
    collapsed: boolean
    collapsedWidth: number
    menuSelectedKey: string
    siderBarWidth: number
    searchShow: string
    collapsedIcon: string
    collapsedButtonShow: boolean
    logoNameShow: string
    pcOrMove: string
}

export class Admin extends React.Component<AdminProps, AdminState> {

    state: any = {
        $default: {},
        collapsed: false,
        selectedItems: [],
        siderBarWidth: 200,
        searchShow: 'inline-flex',
        collapsedIcon: '',
        collapsedButtonShow: false,
        logoNameShow: '',
        pcOrMove: ''
    }

    componentDidMount() {
        $('.loading').hide();
        // 注册全局页面打开模式
        const appTab: AppTab = this.refs.appTab as any
        YvanUI.extend({
            showPageOption: (title: any, key: string, jsr: any) => {
                if (appTab.contains(key)) {
                    appTab.changeContent(key, {
                        title: title,
                        content: jsr
                    })
                } else {
                    appTab.add({
                        title: title,
                        key: key,
                        content: jsr
                    })
                }
            },
            closePageOption(jsr: any) {
                appTab.state.panes.some((pane) => {
                    if (pane.content === jsr) {
                        appTab.closeMe(pane.key)
                    }
                })
            }
        })

        // 还原上次打开的页面
        let vv = YvanUI.unparam(window.location.hash);
        if (!vv.activeKey) {
            return;
        }
        if (vv.activeKey.indexOf("?") > 0) {
            vv.activeKey = vv.activeKey.split("?")[0];
        }

        if (vv.activeKey) {
            const key = vv.activeKey
            this.openScope(key, '')
        }
    }

    openScope(key: string, title?: string) {
        const appTab: AppTab = this.refs.appTab as any

        // 如果之前打开过这个标签，就取消打开，直接选中
        if (appTab.contains(key)) {
            appTab.select(key)
            return
        }

        if (_.includes(window['errorKeys'], key)) {
            appTab.add({
                title: '发生异常',
                key,
                content: (
                    <div className="page-wrap">
                        <Antd.Card className='skeleton-wrap'>
                            <Antd.Alert
                                message="无法加载该页面"
                                description={key}
                                type="error"
                                showIcon
                            />
                        </Antd.Card>
                    </div>
                )
            })
            return
        }

        // 加载骨架屏
        appTab.add({
            title: <span><Antd.Spin size="small"/>&nbsp;正在打开</span>,
            key,
            content: (<div className="page-wrap">
                <Antd.Card className='skeleton-wrap'>
                    <Skeleton/>
                </Antd.Card>
            </div>)
        })

        //@ts-ignore
        require([key], (res) => {
            const Scope = res.default // as typeof Scope<any, any>
            if (!Scope) {
                YvanUI.showErrorDialog("无法打开" + key)
                return
            }
            if (typeof Scope.prototype.isReactComponent === 'object') {
                // 是react 页面，直接打开
                appTab.changeContent(key, {
                    title: title || '未知页面',
                    content: <Scope/>
                })
                return
            }
            if (Scope) {
                // 这里会跳到 extend.showPageOption
                new Scope().showPage(key, {})
            }

        }, (err) => {
            console.error(err)
            window['errorKeys'].push(key)
            appTab.changeContent(key, {
                title: '发生异常',
                content: (
                    <div className="page-wrap">
                        <Antd.Card className='skeleton-wrap'>
                            <Antd.Alert
                                message="加载时发生错误"
                                description={<pre>{JSON.stringify(err, null, ' ')}</pre>}
                                type="error"
                                showIcon
                            />
                        </Antd.Card>
                    </div>
                )
            })
        })
    }

    menuClick({key, item, keyPath}) {
        const title = item.props.title
        this.openScope(key, title)
        if (this.state.pcOrMove == 'move') {//折叠菜单
            this.setState({
                collapsedIcon: 'fa fa-indent',
                siderBarWidth: 0,
                searchShow: 'none'
            });
        }
    }

    collapsedToggle = () => {
        if (this.state.collapsedIcon == 'fa fa-indent') {//展开菜单
            this.setState({
                collapsedIcon: 'fa fa-outdent',
                siderBarWidth: 200,
                searchShow: 'inline-flex',
            });
        } else {//折叠菜单
            this.setState({
                collapsedIcon: 'fa fa-indent',
                siderBarWidth: 0,
                searchShow: 'none'
            });
        }
    }
    breakpoint = (broken) => {//移动端和PC端区别
        if (broken) {//移动端
            this.setState({
                siderBarWidth: 0,
                searchShow: 'none',
                collapsedButtonShow: true,
                collapsedIcon: 'fa fa-indent',
                logoNameShow: 'logo-name-show',
                pcOrMove: 'move'
            });
            if (!this.state.menuSelectedKey) {//是否有tab页
                this.setState({
                    collapsedIcon: 'fa fa-outdent',
                    siderBarWidth: 200,
                    searchShow: 'inline-flex',
                });
            }
        } else {//PC端
            this.setState({
                siderBarWidth: 200,
                searchShow: 'inline-flex',
                collapsedButtonShow: false,
                collapsedIcon: 'fa fa-outdent',
                logoNameShow: '',
                pcOrMove: 'pc'
            });
        }
    }

    renderAside() {
        return (
            <div>
                <div className='tree-search-wrap'>
                    <Search
                        placeholder="search"
                        onSearch={value => console.log(value)}
                        className='tree-search'
                        style={{width: 180, display: this.state.searchShow}}
                    />
                </div>
                <Sider trigger={null} collapsible={true} collapsed={this.state.collapsed} className="main-left-tree"
                       breakpoint="lg"
                       width={this.state.siderBarWidth}
                       collapsedWidth={this.state.collapsedWidth}
                       onBreakpoint={this.breakpoint}
                >
                    <Menu theme="dark" mode="inline"
                          ref="theMenu"
                          selectedKeys={[this.state.menuSelectedKey]}
                          defaultSelectedKeys={['dashboard']}
                          onClick={this.menuClick.bind(this)}>
                        {
                            ...(() => {
                                if (window['hideExample']) {
                                    return []
                                } else {
                                    return [
                                        <SubMenu title="示例-简单" icon={YvanUI.renderIcon('fa fa-bars')}>
                                            <Menu.Item key="./example/Dashboard"
                                                       title='表单演示'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>表单演示</Menu.Item>

                                            <Menu.Item key="./example/Simple"
                                                       title='极简示例'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简示例</Menu.Item>

                                            <Menu.Item key="./example/Simple2"
                                                       title='极简示例2'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简示例2</Menu.Item>

                                            <Menu.Item key="./example/DemoPromiseVJson"
                                                       title='动态界面'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>动态界面</Menu.Item>

                                            <Menu.Item key="./example/DemoPlace"
                                                       title='动态界面2'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>动态界面2</Menu.Item>

                                            <Menu.Item key="./example/SimpleTabs"
                                                       title='极简-Tab'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简-Tab</Menu.Item>

                                            <Menu.Item key="./example/SimpleTabs2"
                                                       title='极简-Tab2'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简-Tab2</Menu.Item>

                                            <Menu.Item key="./example/Simple4"
                                                       title='极简-fieldset'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简-fieldset</Menu.Item>

                                            <Menu.Item key="./example/SimpleDate"
                                                       title='极简-日期'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简-日期</Menu.Item>

                                            <Menu.Item key="./example/SimpleRadio"
                                                       title='极简-单选'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简-单选</Menu.Item>

                                            <Menu.Item key="./example/SimpleSearch"
                                                       title='极简-查找框'
                                                       icon={YvanUI.renderIcon('fa fa-search')}>极简-查找框</Menu.Item>

                                            <Menu.Item key="./example/SimpleCheckSwitch"
                                                       title='组件-勾选'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>组件-勾选</Menu.Item>

                                            <Menu.Item key="./example/SimpleCheckbox"
                                                       title='组件-勾选组'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>组件-勾选组</Menu.Item>

                                            <Menu.Item key="./example/Simple3"
                                                       title='极简-双向绑定3'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>极简-表格2</Menu.Item>

                                            <Menu.Item key="./example/DemoDialog"
                                                       title='对话框演示'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>对话框演示</Menu.Item>

                                            <Menu.Item key="./example/GridBasic"
                                                       title='基本表格'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>基本表格演示</Menu.Item>

                                            <Menu.Item key="./example/DemoReact"
                                                       title='React页面'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>React页面</Menu.Item>

                                            <Menu.Item key="./example/SimpleTable"
                                                       title='React页面'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>Table</Menu.Item>
                                            <Menu.Item key="./example/SimpleSortableTable"
                                                       title='React页面'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>sortableTable</Menu.Item>

                                        </SubMenu>
                                        ,
                                        <SubMenu title="示例2-网格" icon={YvanUI.renderIcon('fa fa-bars')}>
                                            <Menu.Item key="./example2/DemoPageT1"
                                                       title='单表格'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>单表格</Menu.Item>

                                            <Menu.Item key="./example2/DemoPageT2"
                                                       title='双表格'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>双表格</Menu.Item>
                                        </SubMenu>
                                        ,
                                        <SubMenu title="示例3-数据和表格" icon={YvanUI.renderIcon('fa fa-bars')}>
                                            <Menu.Item key="./example3/DemoData"
                                                       title='数据源演示'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>数据源演示</Menu.Item>

                                            <Menu.Item key="./example3/demo_filter"
                                                       title='数据筛选'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>数据筛选</Menu.Item>

                                            <Menu.Item key="./example3/DemoData2"
                                                       title='ScopeData'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>ScopeData</Menu.Item>

                                            <Menu.Item key="./example3/grid_selected"
                                                       title='表格选中'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>表格选中</Menu.Item>

                                            <Menu.Item key="./example3/grid_loading"
                                                       title='GridLoading'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>GridLoading</Menu.Item>

                                            <Menu.Item key="./example3/grid_check"
                                                       title='GridCheck'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>GridCheck</Menu.Item>

                                            <Menu.Item key="./example3/grid_formatter"
                                                       title='GridFormatter'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>GridFormatter</Menu.Item>

                                            <Menu.Item key="./example3/grid_sort"
                                                       title='表格排序'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>表格排序</Menu.Item>

                                            <Menu.Item key="./example3/grid_filter"
                                                       title='表头筛选'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>表头筛选</Menu.Item>

                                            <Menu.Item key="./example3/grid_edit"
                                                       title='表格编辑'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>表格编辑</Menu.Item>

                                            <Menu.Item key="./example3/excelImport"
                                                       title='excel导入'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>excel导入</Menu.Item>
                                        </SubMenu>
                                        ,
                                        <SubMenu title="示例4-布局" icon={YvanUI.renderIcon('fa fa-bars')}>
                                            <Menu.Item key="./example4/layout1"
                                                       title='布局1'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>布局1</Menu.Item>

                                            <Menu.Item key="./example4/layout2"
                                                       title='布局2'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>布局2</Menu.Item>

                                            <Menu.Item key="./example4/layout3"
                                                       title='布局3'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>布局3-单表</Menu.Item>

                                            <Menu.Item key="./example4/layout3-2"
                                                       title='布局3'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>布局3-单Tabs</Menu.Item>

                                            <Menu.Item key="./example4/layout4"
                                                       title='布局4'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>布局4</Menu.Item>

                                            <Menu.Item key="./example4/layout5"
                                                       title='布局5-上下表'
                                                       icon={YvanUI.renderIcon('fa fa-bars')}>布局5-上下表</Menu.Item>
                                        </SubMenu>
                                    ]
                                }
                            })()
                        }

                        {/*<SubMenu title="数据体系" icon={YvanUI.renderIcon('fa fa-bars')}>*/}
                        {/*    <Menu.Item*/}
                        {/*        key="./dataSystem/SymptomDataSystem"*/}
                        {/*        title='症状数据体系'*/}
                        {/*        icon={YvanUI.renderIcon('fa fa-bars')}>症状数据体系</Menu.Item>*/}
                        {/*    <Menu.Item*/}
                        {/*        key="./dataSystem/DiseaseDataSystem"*/}
                        {/*        title='疾病数据体系'*/}
                        {/*        icon={YvanUI.renderIcon('fa fa-bars')}>疾病数据体系</Menu.Item>*/}
                        {/*</SubMenu>*/}
                        <Menu.Item key="./protal" title='首页'>首页</Menu.Item>
                        <SubMenu title="数据对齐">
                            <Menu.Item key="./dataAlias/aliasInsert" title='对齐设置'>对齐设置</Menu.Item>
                            {/*<Menu.Item key="./dataAlias/aliasQuery" title='对齐查询'>对齐查询</Menu.Item>*/}
                        </SubMenu>
                        <SubMenu title="数据管理">
                            {/*<Menu.Item key="./dataManage/NodeInsert" title='知识节点'>知识节点</Menu.Item>*/}
                            <Menu.Item key="./dataManage/NodeRelationInsert" title='知识关联'>知识关联</Menu.Item>
                            <Menu.Item key="./dataManage/NodeGroup" title='病症组合'>病症组合</Menu.Item>
                            <Menu.Item key="./dataManage/NodeAttributeInsert" title='病症百科'>病症百科</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="./RecommendSymptom" title='推理'>推理</Menu.Item>
                    </Menu>
                </Sider>
            </div>
        );
    }

    renderHeader() {
        const menu = (
            <Menu>
                <Menu.Item key="0">
                    修改密码
                </Menu.Item>
                <Menu.Divider/>
                <Menu.Item key="1">
                    退出
                </Menu.Item>
            </Menu>
        );
        return (
            <Header className="site-layout-background" style={{padding: 0}}>
                <div className="logo">
                    <span>
                        <span className="iconfont icon-jzt-ai" style={{fontSize:'32px',marginRight:'2px'}}></span>
                        {/*<img src="/static/images/logo-AI.png" alt="" width={50}/>*/}
                        <h3 className={this.state.logoNameShow}>小九知识图谱维护系统</h3>
                        <i className={this.state.collapsedIcon} aria-hidden="true" onClick={this.collapsedToggle}></i>
                    </span>
                </div>
                <Dropdown overlay={menu} className='hearder-menu'>
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        admin
                        <YvanUI.AntdIcon.DownOutlined/>
                    </a>
                </Dropdown>
                {/*{React.createElement(this.state.collapsed ? <span>打开</span> : <span>关闭</span>, {*/}
                {/*    className: 'trigger',*/}
                {/*    onClick: this.toggle,*/}
                {/*})}*/}
            </Header>
        )
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    onAppTabChange(sender: AppTab, activeKey: string) {
        this.setState({
            menuSelectedKey: activeKey
        })
        window.location.hash = $.param({activeKey});
    }

    render() {
        return (
            <Layout>
                {this.renderHeader()}
                <Layout className="site-layout">
                    {this.renderAside()}
                    <Content className="site-layout-background"
                             style={{
                                 minHeight: 280,
                             }}>
                        <YvanUI.AppTab ref="appTab" onChange={this.onAppTabChange.bind(this)}/>
                    </Content>
                </Layout>
            </Layout>
            // <Layout>
            //     {this.renderAside()}
            //
            //     <Layout className="site-layout">
            //         {this.renderHeader()}
            //
            //         <Content className="site-layout-background"
            //                  style={{
            //                      minHeight: 280,
            //                  }}>
            //             <YvanUI.AppTab ref="appTab"/>
            //         </Content>
            //     </Layout>
            // </Layout>
        );
    }
}